<template>
	<!-- 登录页面容器 -->
	<div class="login-container">
	  <!-- 使用Element UI的表单组件 -->
	  <el-form 
		:model="form"   
		:rules="rules"     
		ref="form"         
		label-width="80px" 
		class="login-form demo-ruleForm">
		
		<!-- 登录标题 -->
		<h2 class="login-title">管理系统</h2>
		
		<!-- 用户名输入框 -->
		<el-form-item label="用户名" prop="username">
		  <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
		</el-form-item>
		
		<!-- 密码输入框 -->
		<el-form-item label="密码" prop="password">
		  <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password></el-input>
		</el-form-item>
		
		<!-- 登录按钮和错误提示区域 -->
		<div style="display: flex; align-items: center;">
		  <el-form-item>
			<el-button 
			  type="primary" 
			  @click="onSubmit('form')"
			  :loading="loading">
			  登录
			</el-button>
		  </el-form-item>
		  <!-- 错误提示信息 -->
		  <span v-if="!isTrue" style="margin-left: 20px; color: red;">
			{{ msg }}
		  </span>
		</div>
	  </el-form>
	</div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
	name: "Login",
	data() {
	  return {
		form: {
		  username: "",
		  password: "",
		},
		msg: "用户名或密码错误",
		isTrue: true,
		loading: false, // 新增加载状态
		rules: {
		  username: [
			{ required: true, message: "请输入用户名", trigger: "blur" },
		  ],
		  password: [
			{ required: true, message: "请输入密码", trigger: "blur" },
		  ],
		},
	  };
	},
	methods: {
	  onSubmit(forName) {
		this.$refs[forName].validate((valid) => {
		  if (valid) {
			this.loading = true; // 开始加载
			this.isTrue = true; // 重置错误状态
			
			axios.get(this.$global_msg.adminRoute + "/admin/login", {
			  params: {
				username: this.form.username,
				password: this.form.password,
			  },
			})
			.then((res) => {
			  if (res.data.code === 200) {
				// 登录成功处理
				sessionStorage.setItem("admin", this.form.username);
				sessionStorage.setItem("T-Token", res.data.token || res.data.data);
				
				// 跳转到首页
				this.$router.push("/live/banner");
				
				// 清空表单
				this.form.username = "";
				this.form.password = "";
			  } else {
				// 登录失败处理
				this.isTrue = false;
				this.msg = res.data.message || "用户名或密码错误";
			  }
			})
			.catch((error) => {
			  // 网络错误处理
			  console.error("登录请求失败:", error);
			  this.isTrue = false;
			  this.msg = "网络错误，请稍后重试";
			})
			.finally(() => {
			  this.loading = false; // 结束加载
			});
		  }
		});
	  },
	},
	mounted() {
	  this.isTrue = true;
	  this.form.username = "";
	  this.form.password = "";
	},
  };
  </script>
  
  <style scoped>
  .login-form {
	width: 350px;
	margin: 160px auto;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 30px;
	border-radius: 20px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .login-container {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #f0f2f5;
	background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  }
  
  .login-title {
	color: #303133;
	text-align: center;
	margin-bottom: 30px;
	font-size: 24px;
	font-weight: 500;
  }
  </style>